<template>
    <div class="cus">
      <div style="width:500px;" class="cus_box">
        <div class="title"><span>退款</span><i @click="$emit('refund_call')" class="el-icon-close"></i></div>
        <div class="content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="退款金额" prop="refundMoney">
                <el-input placeholder="请输入" style="width:120px;" v-model="ruleForm.refundMoney"></el-input>
              </el-form-item>
              <el-form-item label="退款原因" prop="notes">
                <el-input placeholder="请输入" style="width:300px;" v-model="ruleForm.notes"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="$emit('refund_call')">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
              </el-form-item>
            </el-form>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "refund",
      data(){
        var checkAge = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('请输入'));
          }
            if (isNaN(value)) {
              callback(new Error('请输入数字值'));
            }else if(value.indexOf('.')!=-1){
              if(value.split('.')[1].length>2){
                callback(new Error('最多两位小数'));
              }else{
                callback();
              }
            }
            else {
                callback();
            }
        };
          return{
            ruleForm:{
              refundMoney:'',
              notes:''
            },
            rules:{
              refundMoney: [
                { required: true, message: '请输入', trigger: 'blur' },
                { validator: checkAge, trigger: 'blur' }
              ],
              notes:[
                { required: true, message: '请输入', trigger: 'blur' }
              ]
            }
          }
      },
      props:['res'],
      methods:{
        submitForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // alert('submit!');
              this.submit();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        async submit(){
          await this.api.orderRefund({
            id:this.res.id,
            refundMoney:this.ruleForm.refundMoney,
            notes:this.ruleForm.notes,
            state:1
          });
          this.$emit('refund_call',true);
        }
      }
    }
</script>

<style scoped lang="scss">

</style>
